<template>
  <div>
    <van-nav-bar>
      <template #title>
        <h3 class="title">请选择您需要的类型</h3>
      </template>
    </van-nav-bar>
    <!-- 复选框 -->
    <div class="cont">
      <div class="top">
        <span>多个种类供你选择</span>
        <div class="text">
          <div class="one">
            <p>两年驾龄司机</p>
            <div class="right">
              一口价
              <h3>62.2</h3>
              元
              <input
                type="checkbox"
                class="check"
                v-model="checked1"
                @click="choose1"
              />
              <!-- <el-checkbox v-model="check"></el-checkbox> -->
            </div>
          </div>
          <div class="one">
            <p>五年驾龄司机</p>
            <div class="right">
              一口价
              <h3>80</h3>
              元
              <input
                type="checkbox"
                class="check"
                v-model="checked2"
                @click="choose2"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 确认按钮 -->
      <div class="btn">
        <van-button type="primary" @click="showpupo" size="large">
          确认订单
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      // show1: false,
      checked1: false,
      checked2: false,
    };
  },
  methods: {
    showpupo() {
      // this.show1 = true;

      if (this.checked1 == false && this.checked2 == false) {
        Dialog.alert({
          message: "请选择您所需要的服务",
        }).then(() => {
          // on close
        });
      } else {
        this.$emit("child", true);
      }
    },
    choose1() {
      if (this.checked1 == false) {
        // console.log(this.checked1);
        this.checked2 = false;
        // console.log(this.checked2);
        this.checked1 = true;
      } else {
        this.checked1 = false;
      }
    },
    choose2() {
      if (this.checked2 == false) {
        this.checked1 = false;
        this.checked2 = true;
      } else {
        this.checked1 = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
}
.top {
  position: relative;
  top: -30px;
  span {
    display: block;
    position: relative;
    bottom: -25px;
    z-index: -1;
    height: 80px;
    background: orange;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 55px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .text {
    width: 100%;
    background: #ffff;
    // position: absolute;
    // top: 50px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .one {
      width: 100%;
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 10px;
      p {
        display: inline-block;
        font-size: 18px;
        text-align: center;
      }
      .right {
        width: 40%;
        display: inline-block;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .check {
          width: 30px;
          height: 20px;
        }
      }
    }
  }
}

.btn {
  width: 100%;
  position: sticky;
  bottom: -10px;
}
.van-overlay {
  background-color: white;
}
</style>